<!DOCTYPE html>
<html>
<head>
    <title></title>

    <link href="/css/normalize.css" rel="stylesheet" type="text/css"/>
    <link href="/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900|Titillium+Web:400,200,600,700,900'
          rel='stylesheet' type='text/css'>

    <script src="/js/jquery.js" type="text/javascript"></script>
    <script src="/js/TEEM.js" type="text/javascript"></script>

    <!-- ckeditor-->
    <script src="/ckeditor/ckeditor.js"></script>
    <link rel="stylesheet" href="/ckeditor/samples/sample.css">
    <link rel="stylesheet" href="/ckeditor/skins/moono/editor.css">
    <script>
        UPLOADCARE_LOCALE = "en";
        UPLOADCARE_TABS = "file";
        UPLOADCARE_AUTOSTORE = true;
        UPLOADCARE_PUBLIC_KEY = "c328c6be3c27551ba207";
        UPLOADCARE_CROP = "600x1000"
    </script>
    <script src="//ucarecdn.com/widget/0.15.0/uploadcare/uploadcare-0.15.0.min.js"></script>


</head>
<body>
<div class="loader"><i></i></div>


<div id="header">
    <div id="menu">
        <div data-settings title="Settings"><i class="icon-cog"></i></div>
        <div data-logout title="Logout"><i class="icon-signout"></i></div>
        <div data-profile title="Profile"><i class="icon-user"></i></div>
    </div>
    <div id="TEEM">TEEEM</div>
</div>

<div class="feedUpdate">

    <div id="userInValid" class="box" style="display: none">
        <div class="login">
            <span>Username</span> <span><input type="text" id="username"/></span>

            <span>Password</span> <span><input type="password" id="password"/></span>
            <span>
                <div class="btn" id="getUserDetails">Submit</div>
            </span>
        </div>


    </div>

    <div>
        <div id="userValid" class="box">
            <div class="boxHeader">
                <div class="profileImage"></div>
                <div class="msgTitle">Jimmy</div>
            </div>
            <div class="msgContent" contenteditable="true" id="userPost">
                <p style="color: #aaa">Post Something...</p>
            </div>
            <div class="msgSubmit">
                <div class="btn" id="postUserMsg">
                    Submit
                </div>
            </div>
        </div>
    </div>
</div>

<div class="feed">
    <!--
    <div class="box">
        <div class="boxHeader">
            <div class="profileImage"></div>
            <div class="msgDate">5:00pm - Today</div>
            <div class="msgTitle">Jimmy</div>
        </div>
        <div class="msgContent">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dicta dolorem eligendi eos error explicabo
                fugit iste laudantium officiis, quae quasi quia quisquam sapiente.</p>
        </div>
    </div>
    -->
</div>

<!--templates -->

<div data-template="box" type="text/html" style="display: none">
    <div class="box">
        <div class="boxHeader">
            <div class="profileImage"></div>
            <div class="msgDate">5:00pm - Today</div>
            <div class="msgTitle">Jimmy</div>
        </div>
        <div class="msgContent">
        </div>
    </div>
</div>

<script>

    $(function () {
        var options = {};
        TEEM.init(options);
    })
</script>

</body>
</html>